<template>
	<view class="tui-skeleton">
		<view v-if="orderType == 2 || orderType == 1" id="dates" ref="dates" class="padding-lr-30 padding-tb-24 flex-row">
		  <view v-for="(val,key) in dates" :key="key" :class="{'date-active':key===dateInx}" class="dates-item margin-right-20 flex-row flex-center" @click="dateInx = key">
		    <text class="text-24" :class="['color-' + (key===dateInx ? 'white' : 't1')]">{{ val.label }}{{ val.count ? `(${val.count})` : '' }}</text>
		  </view>
		</view>
		<scroll-view v-if="list.length > 0" 

		:style="{height: scrollHeight + 'px'}"
		:refresher-triggered="refresh"
		refresher-enabled
		enable-back-to-top
		scroll-y
		@refresherrefresh="refresherrefresh"
		@scrolltolower="nextPage"
		class="flex-column">
			<view v-for="(item, index) in list" :key="index">
				<view class="carOrder">
					<view class="car-list">
						<view :class="['list-header',headerList[orderType]]" @click="goDetails(item)">
							<view class="header-name" style="max-width: 80%;">
								<!-- {{item.from}} —— {{item.to}} -->
								新旅投客运平台
							</view>
							<view class="header-state-bg-0" v-if="orderType == 0">
								{{item.orderStatus}}
							</view>
							<view class="header-state-bg-1" v-if="orderType == 1">
								{{item.orderStatusLabel}}
							</view>
							<view class="header-state-bg-2" v-else-if="orderType == 2">
								{{item.orderStatusLabel}}
							</view>
							<view class="header-state-bg-3" v-else-if="orderType == 3">
								{{item.orderStatusLabel}}
							</view>
						</view>
						<view class="car-conten" @click="goDetails(item)">
							<view class="conten-time">
								<view class="star-time">
									{{timeFilter(item.startTime)}}
								</view>
								<view class="day">
									{{dayFilter(item)}}天
								</view>
								<view class="star-end">
									{{timeFilter(item.endTime)}}
								</view>
							</view>
							<view class="conten-city">
								<view class="conten-time">
									<view class="star-time" style="color: #00000099;font-weight: 400;font-size: 24rpx;">
										{{item.from}}
									</view>
									<view
										style="width: 50rpx;height: 15rpx;background-size: 100% 100%;background-image: url('https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/icon_arrow.png');">
			
									</view>
									<view class="star-end" style="color: #00000099;font-weight: 400;font-size: 24rpx;">
										{{item.to}}
									</view>
								</view>
							</view>
							<view class="conten-cost">
								车费:{{item.totalPrice}}
							</view>
						</view>
						<view class="car-info">
							<view class="info" v-if="orderType != 0">
								<view class="car-image" v-if="orderType != 3"></view>
								<view v-else>
									<view class="car-image" :style="{'background-image' : 'url(' + item.driverAvatar + ')'}" v-if="item.driverAvatar"></view>
									<view class="car-image" v-else></view>
								</view>
								
								<view class="car-infomation">
									<view style="font-weight: bold;">
										{{item.driverName}}
										<view class='text-20 color-t3'>
											{{ getVehicleText(item.vehicleType,item.vehicleNumber) }}
						
										</view>
										
									</view>
								</view>
							</view>
							<view></view>
							<view class="btn-list" v-if="orderType != 3">
								<!-- 待抢单 -->
								<view class="grabasingle" v-if="orderType == 0" @click="goRobOrder(item)">
									立即抢单
								</view>
								<!-- 待分配 -->
								<view class="distribution-order" v-if="orderType == 1" @click="goDrive(item)">
									立即分配
								</view>
								<!-- 待完成 -->
								<view v-if="orderType == 2">
									<view class="distribution-order" v-if="item.orderStatusLabel == '进行中'" @click="endOrder(item)">
										结束行程
									</view>
									<view class="distribution-order" v-if="item.orderStatusLabel == '待出发'" @click="startOrder(item)">
										开始行程
									</view>
									<view class="thecountdown" v-if="item.orderStatusLabel == '待支付'">
									
										待支付 剩余:<u-count-down style="margin-left: 4rpx;" @finish="getSothBusList()" :time="item.payScountDown>1000?item.payScountDown : item.payScountDown*1000"></u-count-down>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<l-footer :has-more="hasMore" />
		</scroll-view>
		<view v-else :style="{height:scrollHeight * 2 +'rpx'}" class="no-list">
			<view v-if="orderType == 2" style="margin-top: 50vh;">
				<l-no-data type="order" text="暂无数据" />
			</view>
			<view v-else>
				<l-no-data type="order" text="暂无数据" />
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/api/request'
	import sothebusOrderCard from '../sothebus-order-card/sothebus-order-card'
	import {
		mapGetters
	} from 'vuex'
	import {
		getElementInfo,
		jump,
		dateFormat,
		loading,
		toast
	} from '@/common/util'
	import {
		getOrderConfirmPageForCompanyMp,
		getOrderPageForCompanyMpSize,
		getOrderPageForCompanyMp,
		orderAutoPush,
		orderStatusUpdate,
		orderTrackStart,
		endOrder,
		finishOrder
	} from '@/common/api/order'
	import {
		preloadData
	} from '../../index'
	import {companyGrabOrders, getCarpoolTakeOrderStatus, setCarpoolTakeOrderStatus, driverSubsidyProportionPage, setDriverSubsidyProportion, grabOrderPage,pageOrderRecord } from '@/common/api/driver.js'
	const oneDay = 1000 * 60 * 60 * 24
	export default {
		name: 'OrderPage',
		components: {
			sothebusOrderCard
		},
		props: {
			type: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 0
			},
			orderType: {
				type: Number,
				default: 0
			},
			orderList: {
				type: Object,
				default: {}
			},
			cityId:{
				type:Array,
				default:[]
			},
			singleState:{
				type:String,
				default:''
			},
			singleEnd:{
				type:String,
				default:''
			},
			NUMBERJUDEGE:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				headerList:['list-header-bg-0','list-header-bg-1','list-header-bg-2','list-header-bg-3'],
				headerStateList:['header-state-bg-0','header-state-bg-1','header-state-bg-2','header-state-bg-3'],
				pageCurrent:1,
				pageSize:10,
				preloadData,
				list: [],
				page: 1,
				hasMore: true,
				showSkeleton: true,
				top: 0,
				refresh: false,
				dateInx: 0,
				dates: [{
						label: '全部',
						value: '',
						count: 0
					},
					{
						label: '今天',
						value: 0,
						count: 0
					},
					{
						label: '明天',
						value: 1,
						count: 0
					},
					{
						label: '后天',
						value: 2,
						count: 0
					}
				],
				scrollHeight: 0,
				current:1,
				size:10,
				wssOrderStatus:null
			}
		},
		computed: {
			date() {
				const val = this.dates[this.dateInx].value
				if (val !== '') {
					const date = new Date().getTime() + oneDay * val
					return dateFormat(date)
				}
				return ''
			},
			...mapGetters({
				userId: 'userId'
			})
		},
		watch: {
			orderType: {
				handler(newVal) {
					this.getSothBusList()
				},
				immediate: true,
				deep: true
			},
			NUMBERJUDEGE(newVal){
				uni.showLoading({  // 显示加载中loading效果 
				    title: "加载中",
				    mask: true  //开启蒙版遮罩
				  });
				this.current = 1 ;
				this.size = 10 ;
				this.getSothBusList()
			},
			current(newVal) {

				this.getData()
			},
			date() {
				this.getSothBusList()
			},
			height() {
				this.getHeight()
			},
			orderList:{
				handler(newVal){
					if(newVal && this.orderType == 0){
						console.log(this.list)
						console.log(newVal,'mewval')
						let judge = true
						let judgeIndex = 0
						for(let val in this.list){
							if(this.list[val].orderId == newVal.orderId){
								judge = false
								judgeIndex = val
							}
						}
						if(judge){
							this.list.unshift(newVal)
						}else{
							this.list.splice(judgeIndex,1)
							this.list.unshift(newVal)
						}
					}
				},
				deep:true,
			}
		},
		mounted() {
			if(this.orderType == 2){
				let _then = this
				setTimeout(function(){
					console.log(_then.wssOrderStatus)
				},7000)
			}
		},
		beforeDestroy() {
			if((this.orderType == 1 || this.orderType == 2) && this.wssOrderStatus){
				this.wssOrderStatus.closeSocket()
				}
		},
		methods: {
			//获取司机车辆信息
			getVehicleText(val1,val2){
				return val1?val1+val2 : ''
			},
			// 开始行程
			async startOrder(person) {
			  const l = loading('加载中')
			  const orderId = person.orderId || person.id
			  const [err, res] = await orderTrackStart({ orderId })
			  l.hide()
			  if (!request.errorCheck(err, res)) return false
			  toast('行程已开始')
			  // this.reloadList()
			  let send ;
			  if(!this.date){
			  	send = {
			  		miniOrderStatus:30,
			  		current:this.current,
			  		size:this.size
			  	}
			  }else{
			  	send = {
			  		miniOrderStatus:30,
			  		current:this.current,
			  		size:this.size,
			  		startTimeBegin:this.date,
			  		startTimeEnd:this.date
			  	}
			  }
			  if(true){
				  let [err,res] = await pageOrderRecord(send)
				  this.list = res.data.data.records
			  }
			},
			async endOrder(row){
				let _then = this
				uni.showModal({
						title: '提示',
						// 提示文字
						content: '确认结束行程吗？',
						success: function (res) {
								if (res.confirm) {
									let payWay = row.payWay ? row.payWay : '';
									let status = row.status ? row.status :'';
									let changeStatus = '';
									if(row.orderType && row.orderType == 8){
										changeStatus = 7
									}else if (status == 6 && payWay == 1) {
									  changeStatus = 8;
									} else if (status == 6 && payWay != 1) {
									  changeStatus = 7;
									}
									let sent = {
										orderId: row.orderId ? row.orderId : row.id,
										status: changeStatus
									}
									async function endOrderFn(){
										let [err,res] = await finishOrder(sent);
										if(res.data){
											toast('行程已结束')
											let send ;
											if(!_then.date){
												send = {
													miniOrderStatus:30,
													current:_then.current,
													size:_then.size
												}
											}else{
												send = {
													miniOrderStatus:30,
													current:_then.current,
													size:_then.size,
													startTimeBegin:_then.date,
													startTimeEnd:_then.date
												}
											}
											if(true){
																  let [err,res] = await pageOrderRecord(send)
																  _then.list = res.data.data.records
											}
										}else{
											toast('结束失败')
										}
									}
									endOrderFn()
								} else if (res.cancel) {
									
								}
							}
				})
			},
			async timeFn(item,index){
				let then = this
				 let go = setInterval(function(item,index){
					 //payScountDown 展示 payScountDownCv 存数据
					console.log(item,'item')
					console.log(index,'index')
					console.log(then.list,'list')
					if(!then.list[index].cvTime){
		
					  cv = then.list[index].payScountDown
					 then.list[index].payScountDownCv = cv * 1000
					        //倒计时的时长
							  if(then.list[index].payScountDownCv <= 0){
							  //关闭定时器 
								 clearInterval(go);
							  }
					let time = then.list[index].payScountDownCv;
					var m, s;
						m = parseInt(time / 1000 / 60 % 60);
						s = parseInt(time / 1000 % 60);
						m = m < 10 ? '0' + m : m
						s = s < 10 ? '0' + s : s
					  console.log(m + ':' + s)
					  then.list[index].payScountDownCv = then.list[index].payScountDownCv - 1000
					  then.list[index].payScountDown = m + ':' + s
					  then.list[index].cvTime = true
					}else{
						//倒计时的时长
						  if(then.list[index].payScountDownCv <= 0){
						  //关闭定时器 
					
							  clearInterval(go)
						  }
						let time = then.list[index].payScountDownCv;
						var m, s;
							m = parseInt(time / 1000 / 60 % 60);
							s = parseInt(time / 1000 % 60);
							m = m < 10 ? '0' + m : m
							s = s < 10 ? '0' + s : s
						  console.log(m + ':' + s)
						  then.list[index].payScountDownCv = then.list[index].payScountDownCv - 1000
						  then.list[index].payScountDown = m + ':' + s
						  then.list[index].cvTime = true
					}
				},1000,item,index,then)
			},
			 oldTime(data,index){
				 let then = this
				 then.list.map((res,index)=>{
					 if(res.orderStatusLabel == '待支付'){
						 let key = index
						 function getTime(data){
							 console.log(data)
							 console.log(then.list[index])
							then.list[index].payScountDown = then.list[index].payScountDown + 1
						 }
						 let timeIds=setInterval(getTime(key), 2000);
					 }
				 })
			 },
			goDetails(data){
				if(data.id && data.id !=''){
					data.orderId = data.id
				}
				data.orderType = this.orderType
				if(this.orderType == 2 || this.orderType == 3){
					jump('/order/order-detail/order-detail?orderId=' + data.orderId + '&type=order')
				}else{
					uni.navigateTo({
						url:'/order/sothbus-order-detail/sothbus-order-detail?obj=' + JSON.stringify(data)
					})
				}
			},
			async goRobOrder(data){
				let [err,res] = await companyGrabOrders(data.orderId)
				console.log(res.data.data)
				
				if(res.data.code == -1){
					uni.showToast({
					    title: res.data.msg,
						icon:'none',
					    duration: 1000
						})
						return
				}
				data.assignVehicleScountDown=res.data.data
				if(res.data.data){
					uni.navigateTo({
						url:'/order/rob-order/rob-order?person=' + JSON.stringify(data),
					})
				}else{
					uni.showToast({
					    title: '抢单失败',
					    duration: 1000
						})
				}
			},
			async goDrive(item){
				if(!item.orderId){
					item.orderId = item.id
				}
		
				uni.navigateTo({
					url:'/order/rob-order/rob-order?person=' + JSON.stringify(item),
				})
			},
			jump,
			// 请求集合
			async getSothBusList() {
				let list = []
				if(this.orderType == 0){
					// 待抢单列表接口
					let parmes = {
						startTime: this.singleState && this.singleState != '请选择开始日期' ? this.singleState + ' 00:00:00' : '',
						endTime: this.singleEnd && this.singleEnd != '请选择结束日期' ? this.singleEnd + ' 23:59:59' : '',
						fromBizScope: this.cityId.length > 0 && this.cityId[0] != '' ? this.cityId[0] + ',' + this.cityId[1] : '',
						current: this.current,
						size: 10
					}
					console.log(parmes)
					let [err, res] = await grabOrderPage(parmes)
					list = res.data.data.records
					
					if (list < this.size) this.hasMore = false
					// console.log(this.list)
				}else if(this.orderType == 1){ // 待分配
					let send ;
					console.log(this.date)
					if(!this.date){
						send = {
							miniOrderStatus:20,
							current:this.current,
							size:this.size
						}
					}else{
						send = {
							miniOrderStatus:20,
							current:this.current,
							size:this.size,
							startTimeBegin:this.date,
							startTimeEnd:this.date
						}
					}
					let [err,res] = await pageOrderRecord(send)
					list = res.data.data.records
					
					if(!this.wssOrderStatus){
						this.wssOrderStatus = await orderStatusUpdate()
						console.log(this.wssOrderStatus,'wssssss')
						this.wssOrderStatus.socketExamples.onMessage((res)=>{
							console.log("websocket=====", res)
						  this.list = this.list.filter(l => l.id !== res.id)
						})
					}
				}else if(this.orderType == 2){ // 待完成
					let send ;
					console.log(this.date)
					if(!this.date){
						send = {
							miniOrderStatus:30,
							current:this.current,
							size:this.size
						}
					}else{
						send = {
							miniOrderStatus:30,
							current:this.current,
							size:this.size,
							startTimeBegin:this.date,
							startTimeEnd:this.date
						}
					}
					let [err,res] = await pageOrderRecord(send)
					list = res.data.data.records
					
					
					// 订单状态监听
					if(!this.wssOrderStatus){
						this.wssOrderStatus = await orderStatusUpdate()
						console.log(this.wssOrderStatus,'wssssss')
						let _thens = this
						this.wssOrderStatus.socketExamples.onMessage((res)=>{
						  let msg = JSON.parse(JSON.stringify(res.data));
						  msg = JSON.parse(msg)
						  let key ;
						  let newPerson = []
						   list.map((resp,indexp)=>{
							  if(resp.id == msg.id){
								  key = indexp
							  }else{
								  newPerson.push(resp)
							  }
						  })
						_thens.list = newPerson
						})
					}
					// this.oldTime()
					// let _then = this
					list = list.map(res =>{
						res.payScountDown = res.payScountDown * 1000
						return res
					})
					console.log(this.list)
					// console.log(this.list)
					// this.list.map((res,index)=>{
					// 	this.timeFn(res,index)
					// })
				}else{ // 已结束
					let send = {
						miniOrderStatus:60,
						current:this.current,
						size:this.size
					}
					let [err,res] = await pageOrderRecord(send)
					list = res.data.data.records
				}
				if (list.length < this.size) this.hasMore = false
				if (this.current === 1) this.list = list
				else this.list.push(...list)
				uni.stopPullDownRefresh()
				this.refresh = false
				uni.hideLoading();
			},
			dayFilter(data) {
				if(data.startTime || data.endTime){
					const startDate = Date.parse(data.startTime.substring(0, data.startTime.indexOf(' ')))
					const endDate = Date.parse(data.endTime.substring(0, data.endTime.indexOf(' ')))
					const days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000) + 1
					return days
				}
			},
			timeFilter(date) {
				if(date){
					const arr = date.split(' ')
					arr[0] = dateFormat(arr[0], 'MM月DD日')
					arr[1] = arr[1].slice(0, 5)
					return arr.join(' ')
				}
			},
			getHeight() {
				this.scrollHeight = this.height
				// if (this.type) {
				// 	this.scrollHeight = this.height
				// } else {
				// 	getElementInfo('#dates', function(res){
				// 		this.scrollHeight = this.height - res.height
				// 	}, this)
				// }
			},
			getData() {
				// this.reloadList()
				// this.getSize()
			},
			showModel(e) {
				this.$emit('showModel', e)
			},
			refresherrefresh() {
				this.refresh = true
				this.reloadList()
			},
			reloadList() {
				this.current = 1
				this.hasMore = true
				// this.getOrderList()
				this.getSothBusList()
			},
			nextPage() {
				if (this.hasMore && !this.refresh) {
					this.current++
					// this.refresh = 
					// this.getOrderList()
					this.getSothBusList()
				}
			},
			onPulling() {
				console.log(this.refresh)
				console.log("**********")
			},
			// clear() {
			// 	this.page = 1
			// 	this.list = this.list.slice(0, this.pageSize * this.page)
			// 	this.top = this.top ? 0 : 1
			// },
			// 即时通讯
			async getOrderList() {
				return
				let api = orderAutoPush
				let send = {
					status: this.type,
					page: this.page,
					size: this.pageSize,
					startTime: this.date,
					endTime: this.date,
					id: this.userId
				}
				let wssApi = orderAutoPush()
				const [err, res] = wssApi.sendMsg()
				// const [err, res] = await api(send)
				this.showSkeleton = false
				if (!request.errorCheck(err, res)) return false

				const data = res.data.data
				let list = data.records
				if (!list) list = []
				if (list.length < this.pageSize) this.hasMore = false
				uni.stopPullDownRefresh()
				this.refresh = false
				if (this.page === 1) this.list = list
				else this.list.push(...list)

				if (this.type === 1) {
					this.$emit('getSize', {
						type: this.type,
						size: Number(data.total)
					})
				}
			},
			async getSize() {
				// 待签单
				if (this.orderType) {

				} else { // 待分配

				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@include setPadding(tb, 24);
	.carOrder {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.car-list {
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		border: 2rpx solid #DDDDDDFF;
		.list-header-bg-0{
			background-image:linear-gradient(90deg, #FFEAEAFF 0%,#FFEAEA33 100%);
		}
		.list-header-bg-1{
			background: linear-gradient(90deg, #F9E5CC 0%, #F9E5CC33 100%);
		}
		.list-header-bg-2{
			background: linear-gradient(90deg, #DDFBEEFF 0%, #DDFBEE33 100%);
		}
		.list-header-bg-3{
			background: linear-gradient(90deg, #EEEEEEFF 0%, #EEEEEE33 100%);
		}
		.header-state-bg-0{ //待抢单
			font-size: 24rpx;
			font-weight: 400;
			color: #FF5A5CFF;
			border-radius: 6rpx;
			background-color: #FFEAEAFF;
			padding: 10rpx 18rpx;
			letter-spacing: 2rpx;
		}
		.header-state-bg-1{ // 待分配
			font-size: 24rpx;
			font-weight: 400;
			color: #DAA665FF;
			border-radius: 6rpx;
			background-color: #F9E5CCFF;
			padding: 10rpx 18rpx;
			letter-spacing: 2rpx;
		}
		.header-state-bg-2{ // 待完成
			font-size: 24rpx;
			font-weight: 400;
			color: #1BC987FF;
			border-radius: 6rpx;
			background-color: #DDFBEEFF;
			padding: 10rpx 18rpx;
			letter-spacing: 2rpx;
		}
		.header-state-bg-3{ // 已结束
			font-size: 24rpx;
			font-weight: 400;
			color: #888888FF;
			border-radius: 6rpx;
			background-color: #EEEEEEFF;
			padding: 10rpx 18rpx;
			letter-spacing: 2rpx;
		}
		.list-header{
			border-radius: 10rpx;
			width: 100%;
			padding: 26rpx 30rpx;
			line-height: 50rpx;
			font-size: 28rpx;
			font-weight: 400;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row !important;

			.header-name {
				font-size: 28rpx;
				font-weight: 400;
				color: #000000E6;
			}

			.header-state {
				font-size: 24rpx;
				font-weight: 400;
				color: #000;
				border-radius: 6rpx;
				background-color: #d9d9d9;
				padding: 10rpx 18rpx;
				letter-spacing: 2rpx;
			}
		}

		.car-conten {
			width: 100%;
			box-sizing: border-box;
			padding: 40rpx;
			overflow: hidden;
			background-color: #FFFFFF;
			border-bottom: 2rpx solid #DDDDDDFF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.conten-time {
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: row !important;
				justify-content: baseline;
				.star-time {
					font-size: 36rpx;
					font-weight: 400;
					color: #000000E6;
					flex: 1;
					text-align: left;
				}

				.day {
					font-size: 24rpx;
					font-weight: 400;
					width: fit-content;
					color: #00000099;
				}

				.star-end {
					font-size: 36rpx;
					font-weight: 400;
					color: #000000E6;
					flex: 1;
					text-align: right;
				}
			}

			.conten-city {
				margin-top: 16rpx;
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: row !important;

				.conten-item {
					font-size: 24rpx;
					font-weight: 400;
					color: #00000099;
				}
			}

			.conten-cost {
				width: 100%;
				text-align: right;
				font-size: 28rpx;
				font-weight: 400;
				color: #000000E6;
				margin-top: 30rpx;
			}
		}

		.car-info {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx 28rpx;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row !important;

			.info {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-direction: row !important;

				.car-image {
					width: 75rpx;
					height: 75rpx;
					overflow: hidden;
					background-image: url('https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/default_avatar.png');
					background-size: 100% 100%;
					border-radius: 100%;
				}

				.car-infomation {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					font-size: 30rpx;
					font-weight: 400;
					height: 75rpx;
				}
			}

			.btn-list {
				display: flex;

				.grabasingle {
					padding: 20rpx 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					background: linear-gradient(90deg, #E8C9A2 0%, #D9A96A 100%);
					color: #865825FF;
					border-radius: 6rpx;
					letter-spacing: 2rpx;
				}

				.distribution-order {
					padding: 20rpx 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #fff;
					background-image: linear-gradient(to right, #efc690, #dcaa6b);
					border-radius: 6rpx;
					letter-spacing: 2rpx;
				}

				.thecountdown {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 28rpx;
					font-weight: 600;
					color: #F3C243;
					/deep/ .u-count-down .u-count-down__text {
						font-size: 28rpx !important;
						font-weight: 600 !important;
						color: #F3C243 !important;
					}
				}
			}
		}
	}

	.dates-item {
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid $color-border;
		padding: 0 18rpx;
	}

	.date-active {
		background: $color-primary;
		border-color: $color-primary;
	}

	.no-list {
		display: flex;
		align-items: center;
		flex-direction: row !important;
		justify-content: center;
	}

	.no-rob {
		width: 100%;
		text-align: center;
		display: flex;
		align-items: center;

		.no-rob-title {
			font-size: 40rpx;
			font-weight: 400;
		}

		.go-opent-rob {
			width: fit-content;
			padding: 30rpx 40rpx;
			font-size: 30rpx;
			font-weight: 400;
			text-align: center;
			background-color: #db8a25;
			color: #FFFFFF;
			border-radius: 18rpx;
			margin-top: 20rpx;
		}
	}
</style>
